
<template>
  <view class="container">
    <!-- 个人信息卡片 -->
    <view class="profile-card">
      <view class="avatar-wrapper">
        <image class="avatar" :src="avatarUrl" mode="aspectFill" style="width: 100%; height: 100%;" @click="handleToAvatar"/>
      </view>
      <view class="info-wrapper">
        <text class="username">{{ name }}</text>
        <text class="brief">{{ guide }}</text>
      </view>
      <uni-icons type="right" size="20" color="#999999" @click="handleToInfo"/>
    </view>

    <!-- 功能列表 -->
    <view class="function-list">
      <view class="function-item">
        <view class="item-left">
          <uni-icons type="person" size="24" color="#333333"/>
          <text class="item-text">编辑资料</text>
        </view>
        <uni-icons type="right" size="20" color="#999999" @click="handleToEditInfo"/>
      </view>
      <view class="function-item" @click="handleToPwd">
        <view class="item-left">
          <uni-icons type="locked" size="24" color="#333333"/>
          <text class="item-text">修改密码</text>
        </view>
        <uni-icons type="right" size="20" color="#999999"/>
      </view>
    </view>

    <!-- 退出登录按钮 -->
    <view class="cu-list menu">
      <view class="cu-item item-box">
        <view class="content text-center" @click="handleLogout">
          <text class="text-black">退出登录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {getUserProfile} from "@/api/system/user"
import { useUserStore } from '@/store/modules/user'; // 引入 Store 函数

export default {
  data() {
    return {
      name: '',
      guide: '',
      avatarUrl: '',
      password: ''
    }
  },
  setup() {
    const userStore = useUserStore();
    return { userStore };
  },
  computed: {
    windowHeight() {
      return uni.getSystemInfoSync().windowHeight - 50
    }
  },
  methods: {
    getUser() {
      getUserProfile().then(response => {
        console.log("user", response);
        this.name = response.data.nickName;
        const user = response.data;
        if (user.avatar) {
          console.log("user.avatar", user.avatar);
          const backendUrl = process.env.NODE_ENV === 'production' ?
              window.location.origin+"/seano" : 'http://127.0.0.1:17080/seano';
          this.avatarUrl = `${backendUrl}${user.avatar.replace(/upload\/download\//, '')}`;
        }
      });
    },
    handleToInfo() {
      this.$tab.navigateTo('/pages/mine/info/index')
    },
    handleToEditInfo() {
      this.$tab.navigateTo('/pages/mine/info/edit')
    },
    handleToPwd() {
      this.$tab.navigateTo('/pages/mine/pwd/index')
    },
    handleToLogin() {
      this.$tab.reLaunch('/pages/login')
    },
    handleToAvatar() {
      const url = this.avatarUrl ? `/pages/mine/avatar/index?avatarUrl=${encodeURIComponent(this.avatarUrl)}` : '/pages/mine/avatar/index';
      this.$tab.navigateTo(url);
    },
    handleLogout() {
      this.$modal.confirm('确定注销并退出系统吗？').then(() => {
        // 通过 this.$store.user 访问 Store（基于 id 'user'）
        this.userStore.logout().then(() => {
          this.$tab.reLaunch('/pages/login');
        }).catch(error => {
          console.error('注销失败:', error);
        });
      });
    }
  },
  onLoad() {
    console.log('this.userStore', this.userStore);
    this.guide = '查看个人信息';
    this.getUser();
  },
  onShow() {
    // 每次页面显示时重新获取用户信息
    this.getUser();
  }
}
</script>

<style>
page {
  height: 100%;
  background-color: #f9fafb; /* 调整为更柔和的背景色 */
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 30rpx;
  box-sizing: border-box;
  padding-bottom: 100rpx;
}

.profile-card {
  display: flex;
  align-items: center;
  padding: 40rpx;
  background: #ffffff; /* 使用纯白色背景 */
   border-radius: 20rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.function-list {
  background-color: #ffffff;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
}

.function-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  border-bottom: 1px solid #eaecef; /* 调整边框颜色为更浅的灰色 */
}

.cu-list.menu {
  position: fixed;
  bottom: 100rpx;
  left: 0;
  right: 0;
  background-color: #ffffff;
  padding: 0rpx;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
  border-radius: 10rpx;
  display: flex; /* 新增：使用 flex 布局 */
  justify-content: center; /* 新增：内容居中 */
}

.content.text-center {
  padding: 0%;
  width: 100%; /* 新增：确保宽度占满父容器 */
  text-align: center; /* 新增：文本居中 */
}

.text-black {
  font-size: 18px; /* 增大字体 */
  font-weight: 500; /* 增加字体粗细 */
  color: #333333; /* 调整字体颜色 */
}

.avatar-wrapper {
  flex-shrink: 0;
  width: 160rpx;
  height: 160rpx;
  border-radius: 80rpx;
  overflow: hidden;
  margin-right: 30rpx;
}

.avatar {
  width: 100%;
  height: 100%;
}

.info-wrapper {
  flex: 1;
  margin-right: 20rpx;
}

.username {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 10rpx;
}

.brief {
  display: block;
  font-size: 14px;
  color: #999999;
}

.function-item:last-child {
  border-bottom: none;
}

.item-left {
  display: flex;
  align-items: center;
}

.item-text {
  font-size: 16px;
  color: #333333;
  margin-left: 20rpx;
}
</style>
